<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width:400px;
            height:200px;
            border:1px solid #ececec;
            position:relative;
        }
        .imgbody{
            width:auto;
            overflow: auto;
            position: absolute;
            left:0px;
        }
        .imgbody>div{
            display:inline-block;
            float:left;
            width:400px;
            height:200px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="imgbody">
            <div><img src="http://42.62.66.198:8006/2017/07/04/151337.jpg" alt=""/></div>
            <div><img src="http://42.62.66.198:8006/2017/07/04/151300.jpg" alt=""/></div>
            <div><img src="http://42.62.66.198:8006/2017/07/04/151313.jpg" alt=""/></div>
            <div><img src="http://42.62.66.198:8006/2017/07/04/151326.jpg" alt=""/></div>
            <div><img src="http://42.62.66.198:8006/2017/07/04/151349.jpg" alt=""/></div>
        </div>
    </div>

    <script>
        //修改图片区域宽高
        var imgnum= 5,wid=400;
        var imgbody=document.getElementsByClassName("imgbody")[0];
        document.getElementsByClassName("imgbody")[0].style.width=imgnum*wid+"px";
        var num=0;
        var _Interval=2000,//间隔2s
        _Step=50,//步数
        _Tim=1000,//一页耗时
        //间隔等待
        _wait=function(){
            //获取left
            var bodyleft=document.getElementsByClassName("imgbody")[0].style.left;
            if(!bodyleft){
                bodyleft=0;
            }
            else{
                bodyleft=parseFloat(bodyleft);
            }
            console.log(bodyleft);
            if(bodyleft>-2000){
                console.log("WORK");
                var wait=setTimeout(function(){
                    clearTimeout(wait);
                    _go();
                },_Interval);
            }
            else{
                console.log("OVER");
            }
        },
        //翻页
        _go=function(){
            var stepgo=setTimeout(function(){
                if(num<_Step){
                    console.log(num);
                    var bodyleft=document.getElementsByClassName("imgbody")[0].style.left;
                    if(!bodyleft){bodyleft=0};
                    num++;
                    imgbody.style.left=parseFloat(bodyleft)-(wid/_Step)+"px";
                    _go();
                }
                else{
                    clearTimeout(stepgo);
                    num=0;
                    _wait();
                }

            },_Tim/_Step)
        };
        _wait();
    </script>
</body>
</html>